<template>
	<!-- 主页的纵向滚动 -->
	<swiper vertical :current="verticalIndex" :duration="300" class="swiper" @change="isChange"
		@transition="isLocationChange" @animationfinish="isEnd">
		<swiper-item class="fui-swiper__item" v-for="(item,index) in list" :key="index">
			<view class="contentBox" :style="show?'padding-top: 190rpx':''" @click.stop="maskTouchend(item)">
				<!-- 视频 -->
				<view class="videoBox" :class="show?'showBox':'closeBox'" v-if="item.adType==1">
					<video loop :enable-progress-gesture="false" :show-center-play-btn="false" :show-play-btn="false"
						:id="`${item.adIndex}`" style="width:100%;height:100%;" :src="item.media[0]" :controls='false'
						:autoplay="verticalIndex == index"></video>
				</view>
				<view @click.stop="maskTouchend(item)" :style="show?'padding-top: 190rpx':''" :class="show?'showBox':''"
					v-if="currentStatus == 'pause' &&  verticalIndex == index" class="pauseBox">
					<fui-icon name="turningright" style="opacity:0.7 ;" size="200" color="#FFF"></fui-icon>
				</view>
				<!-- 图片 -->
				<view class="pictureBox" :class="show?'showBox':'closeBox'" v-if="item.adType==0">
					<swiper :current="imgIndex" :disable-touch="touch" @change="swiperChange" indicator-dots
						style="width: 100%;height: 100%;">
						<swiper-item v-for="(res,num) in item.urlList" :key="num">
							<image :src="res" mode="aspectFit" style="width:100%;height:100%"></image>
						</swiper-item>
					</swiper>
				</view>
				<view style="" v-show="!show" :style="opacity&& verticalIndex == index?' opacity: 0.5;':''">
					<!-- 文案组件 -->
					<Copywriting :userInfo="item.userInfo"></Copywriting>
					<!-- 右边评论等按钮组件 -->
					<Controls :userInfo="item.userInfo" @upComment="upComment"></Controls>
				</view>
			</view>
			<!-- 
			<view class="Textarea" @click.stop="isFocus=false" v-if="isFocus">
				<fui-textarea @click.stop :cursorSpacing="20" :adjustPosition="false" :focus="isFocus"
					placeholder="请输入内容"></fui-textarea>
			</view> -->
			<!-- 底部评论 -->
			<fui-bottom-popup maskBackground="transparent" :safeArea="false" :show="show" @close="closePopup">
				<view class="fui-custom__wrap">
					<view class="isCloseBox">
						212条评论
					</view>
					<view class="commentList">
						<scroll-view scroll-y :show-scrollbar="false" class="swiperView">
							<view class="commentBox" v-for="(item,index) in 20" :key="index">
								<view class="flex" style="align-items: flex-start;">
									<view class="commentImg">
										<image src="../../static/indexad/dy.png" mode=""></image>
									</view>
									<view class="">
										<view class="comName">
											我的名字
										</view>
										<view class="comMsg">
											内容哦我评论的内容哦
										</view>
										<view class="comTime">
											2小时前·河北 <text>回复</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="inputBox">
						<fui-textarea :padding="['20rpx', '20rpx']" backgroundColor="#F8F8F8" radius="20" height="50rpx"
							@focus="isFocus=true" @blur="isFocus=false" :borderTop="false" :borderBottom="false"
							:cursorSpacing='70' placeholder="请输入评论..."></fui-textarea>

						<view style="float:right;" class="sendBtn" v-show="isFocus">
							发送
						</view>
					</view>
				</view>
			</fui-bottom-popup>
			<!-- 图片 -->
		</swiper-item>
	</swiper>
</template>

<script>
	import Controls from '@/indexPages/components/Controls.vue'
	import Copywriting from '@/indexPages/components/Copywriting.vue'
	export default {
		components: {
			Copywriting,
			Controls
		},
		name: 'ContentList',
		props: {
			// 接收的内容数据
			list: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				isFocus: false,
				show: false,
				imgIndex: 0,
				touch: true,
				touchNum: 0,
				currentStatus: 'play',
				verticalIndex: 0,
				opacity: false,
				currentVideo: null,

			}
		},
		watch: {
			list() {
				if (this.list && this.list[this.verticalIndex].adType == 1) {
					this.currentVideo = uni.createVideoContext(`${this.list[this.verticalIndex].adIndex}`, this);
				}
			}
		},
		// mounted() {
		// 	// 初始化第一个视频播放器
		// 	if (this.list && this.list[0].adType == 1) {
		// 		this.currentVideo = uni.createVideoContext(`${this.list[0].adIndex}`, this);
		// 	}
		// },
		methods: {
			closePopup() {
				setTimeout(() => {
					uni.showTabBar();
				}, 10)
				this.show = false
			},
			upComment() {
				this.show = true
				uni.hideTabBar();

				console.log('打开评论');
			},
			touchstart(e) {
				console.log(e);
				e.stopPropagation()
			},

			swiperChange(e) {
				// 获取上一个
				// console.log(e);
				this.imgIndex = e.detail.current
			},
			// 暂停或播放   或者双击点赞
			maskTouchend(item) {
				this.touchNum++
				setTimeout(() => {
					// 单机
					if (this.touchNum == 1 && item.adType == 1) {
						if (this.currentStatus == 'play') {
							this.currentVideo.pause();
							this.currentStatus = 'pause';
						} else {
							this.currentVideo.play();
							this.currentStatus = 'play';
						}
					}
					//双击
					if (this.touchNum >= 2) {
						console.log('双击点赞')
					}
					this.touchNum = 0
				}, 250)
			},
			// 滑动切换
			videoPlayChange() {
				this.stopOtherVideo();
				let video = uni.createVideoContext(`${this.list[this.verticalIndex].adIndex}`, this);
				this.currentVideo = video;
				this.currentVideo.play();
				this.currentStatus = 'play';
			},
			// 暂停其他视频
			stopOtherVideo() {
				this.list.map(v => {
					let video = uni.createVideoContext(`${v.adIndex}`, this);
					video.seek(1);
					video.pause();
				})
			},
			// current 改变
			isChange(e) {

				// console.log(e, 'current 改变');
			},
			// swiper-item 的位置发生改变时会触发
			isLocationChange(e) {
				if (e.detail.dy > 0) {
					if (e.detail.dy > 50) {
						this.opacity = true
						// console.log("向下拖动");
						// console.log(e.detail.dy, 'swiper-item 改变');
					}
				} else {
					if (e.detail.dy < -50) {
						this.opacity = true
						// console.log("向上拖动");
						// console.log(e.detail.dy, 'swiper-item 改变');
					}
				}

				// console.log(e.detail, 'swiper-item 改变');
			},
			// 动画结束后
			isEnd(e) {
				this.verticalIndex = e.detail.current
				this.opacity = false
				this.videoPlayChange()
				console.log('this.verticalIndex', this.verticalIndex);
				if (this.verticalIndex == this.list.length - 2) {
					console.log('倒数第二个了');
					this.$emit('loadList')
				}
				// console.log(e, '动画结束');
			}
		}
	}
</script>


<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.sendBtn {
		margin-top: 10rpx;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		color: white;
		font-size: 28rpx;
		background-color: #465CFF;
	}

	.comName {
		font-size: 28rpx;
		color: #d1d1d1;
	}

	.inputBox {
		border-top: 1rpx solid #F8F8F8;
		padding-top: 20rpx;
		margin-top: 10rpx;
	}

	.Textarea {
		display: flex;
		align-items: flex-end;
		z-index: 999999999;
		width: 100%;
		top: 0;
		position: fixed;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.comMsg {
		font-size: 28rpx;
		padding: 10rpx 0rpx;
	}

	.comTime {
		font-size: 28rpx;
		color: #d1d1d1;
	}

	.isCloseBox {
		font-size: 28rpx;
		text-align: center;
		height: 100rpx;
	}

	.commentImg {
		height: 70rpx;
		width: 70rpx;
		border-radius: 100%;
		margin-right: 20rpx;

		image {
			height: 70rpx;
			width: 70rpx;
			border-radius: 100%;
		}
	}

	.commentList {
		height: calc(100% - 200rpx);
	}


	.fui-custom__wrap {
		display: flex;
		flex-direction: column;
		height: 55vh;
		padding: 20rpx;
	}


	.swiperView {
		height: 100%;
	}

	.pauseBox {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 5;
		width: 100%;
		height: 100%;
		background-color: transparent;
	}

	.commentBox {
		padding: 10rpx 0rpx;
	}

	.showBox {
		animation: upImgmove 0.3s forwards;
	}

	.closeBox {
		animation: outImgmove 0.3s forwards;
	}


	@keyframes outImgmove {
		0% {
			height: 30%;
		}

		100% {
			height: 100%;
		}
	}


	@keyframes upImgmove {
		0% {
			height: 100%;
		}

		100% {
			height: 30%;
		}
	}


	.indextabs {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		display: flex;
		margin-top: 70rpx;
	}

	.indexbody {
		background-color: #000;
		height: 100vh;
		transition: transform 0.5s;
	}

	.fui-swiper__item {}


	.contentBox {
		// padding-top: 190rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 4;
		position: absolute;
		width: 100vw;
		height: 100vh;
	}

	.swiper {
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.topTabs {
		display: flex;
		align-items: center;
		padding: 20rpx;

		.tablabel {
			width: 100rpx;
			padding: 10rpx;
		}
	}

	.touch-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.videoBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pictureBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>